<template>
  <div class="h-100% w-100% line-item">
    <div class="alarm-item-icon-box" :style="{background: props.color}">
      <i class="iconfont" :class="props.iconClass"></i>
    </div>
    <div class="p-l-4">
      <p class="line-item-title">{{props.title}}</p>
      <p>
        <span class="iconValue" :style="{color:props.color}">{{props.value}}</span>
        <span class="line-item-unit">{{props.unit}}</span>
      </p>
    </div>
  </div>
</template>

<script setup lang="ts">
interface LineStopCardType {
  title:string;
  iconClass:string;
  unit:string;
  value:any;
  color:string;
}
const props = withDefaults(defineProps<LineStopCardType>(),{
  iconClass:"",
  unit:"",
  title:"",
  value:"",
  color:"#3f85ed"
});



</script>

<style scoped>
@import "@/assets/coil-icon/iconfont.css";
.line-item{
  background: #FAFAFB;
  border-radius: 1rem;
  display: flex;
  padding-left: 2rem;
  align-items: center;
}
.iconValue{
  font-size: 2.5vh;
  font-weight: bolder;
  margin-right: 0.5rem;
}
.alarm-item-icon-box{
  height: 5vh;
  width: 5vh;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 0.5rem;
}
.alarm-item-icon-box .iconfont{
  font-size: 1.7rem;
  color: white;
}
.line-item-title{
  font-weight: 600;
}
.line-item-unit{
  color: #777;
}

</style>